<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>红楼梦人物关系图</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .node {
            cursor: pointer;
            transition: transform 0.3s;
        }
        .node:hover {
            transform: scale(1.1);
        }
        .tooltip {
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            padding: 5px;
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <svg width="600" height="400">
        <!-- 中心节点 -->
        <circle class="node" cx="300" cy="200" r="30" fill="#1E90FF"></circle>
        <text x="300" y="205" text-anchor="middle" fill="white">贾府</text>

        <!-- 文件节点 -->
        <circle class="node" cx="150" cy="100" r="20" fill="#FFA07A"></circle>
        <text x="150" y="105" text-anchor="middle" fill="black">宁国府</text>
        <line x1="300" y1="200" x2="150" y2="100" stroke="#CCCCCC" stroke-width="2"></line>

        <circle class="node" cx="150" cy="300" r="20" fill="#FFA07A"></circle>
        <text x="150" y="305" text-anchor="middle" fill="black">荣国府</text>
        <line x1="300" y1="200" x2="150" y2="300" stroke="#CCCCCC" stroke-width="2"></line>

        <!-- item节点 -->
        <circle class="node" cx="450" cy="100" r="20" fill="#00CED1"></circle>
        <text x="450" y="105" text-anchor="middle" fill="black">王熙凤</text>
        <line x1="300" y1="200" x2="450" y2="100" stroke="#CCCCCC" stroke-width="2"></line>

        <circle class="node" cx="450" cy="300" r="20" fill="#00CED1"></circle>
        <text x="450" y="305" text-anchor="middle" fill="black">林黛玉</text>
        <line x1="300" y1="200" x2="450" y2="300" stroke="#CCCCCC" stroke-width="2"></line>
    </svg>
    <div id="tooltip" class="tooltip"></div>
</div>

<script>
    const nodes = document.querySelectorAll('.node');
    const tooltip = document.getElementById('tooltip');

    nodes.forEach(node => {
        node.addEventListener('mouseover', function(e) {
            let content = '';
            if (this.cx.baseVal.value === 300 && this.cy.baseVal.value === 200) {
                content = '贾府：整个故事的核心家族';
            } else if (this.cx.baseVal.value === 150 && this.cy.baseVal.value === 100) {
                content = '宁国府：贾珍、贾蓉等人的住所';
            } else if (this.cx.baseVal.value === 150 && this.cy.baseVal.value === 300) {
                content = '荣国府：贾母、贾政、贾宝玉等人的住所';
            } else if (this.cx.baseVal.value === 450 && this.cy.baseVal.value === 100) {
                content = '王熙凤：荣国府的实际管理者';
            } else if (this.cx.baseVal.value === 450 && this.cy.baseVal.value === 300) {
                content = '林黛玉：贾母的外孙女，贾宝玉的表妹';
            }

            tooltip.innerHTML = content;
            tooltip.style.display = 'block';
            tooltip.style.left = e.pageX + 10 + 'px';
            tooltip.style.top = e.pageY + 10 + 'px';
        });

        node.addEventListener('mouseout', function() {
            tooltip.style.display = 'none';
        });
    });
</script>
</body>
</html>